<template>
  <!-- 上方滚动条-->
  <div class="scrollbar-top" style="height: 0.1rem" :style="barStyle"></div>
  <el-backtop @click="BackTo">
    <transition enter-active-class="animate__animated animate__bounce">
      <div class="cd-top animated cd-is-visible"></div>
    </transition>
  </el-backtop>

  <!--菜单部分-->
  <header
    class="site-header"
    id="site-header"
    ref="headerRef"
    @mousemove.passive="headerHandier"
  >
    <div class="site-top">
      <!--站点名称-->
      <div class="site-branding">
        <span class="site-title">
          <span class="logolink moe-mashiro">
            <router-link :to="{ name: 'Home' }">
              <ruby>
                <span class="sakuraso">{{ user.siteInfo?.start }}</span>
                <span class="no">{{ user.siteInfo?.connect }} </span>
                <span class="shironeko">{{ user.siteInfo?.end }} </span>
                <rp></rp>
                <rt class="chinese-font" style="color: plum">
                  {{ user.siteInfo?.alias }}</rt
                >
                <rp></rp>
              </ruby>
            </router-link>
          </span>
        </span>
      </div>
      <!--中心菜单-->
      <div class="lower-cantiner animate__animated animate__flipInX">
        <div class="lower">
          <!--手机显示图标-->
          <div id="show-nav" class="showNav mobile-fit">
            <div class="line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
          </div>
          <!--菜单文字-->
          <nav class="mobile-fit-control">
            <ul id="menu-new" class="menu">
              <li class="current-menu-ancestor current-menu-parent">
                <!--首页为静态数据,不闭修改-->
                <router-link :to="{ path: '/' }">
                  <span class="faa-parent animated-hover">
                    <i class="fa fa-home faa-shake" aria-hidden="true"> </i>
                    首页
                  </span>
                </router-link>
              </li>
              <Menu :navList="store.state.navList"></Menu>
            </ul>
          </nav>
        </div>
      </div>
      <!--  夜间模式-->
      <div class="light-dark" @click="isShowLightAndDarkIconFun">
        <img
          v-show="!store.state.theme"
          src="https://xiang-1305498579.cos.ap-beijing.myqcloud.com/sakura%2Fimages%2Fsvg%2Fdark.svg"
        />
        <img
          v-show="store.state.theme"
          src="https://xiang-1305498579.cos.ap-beijing.myqcloud.com/sakura%2Fimages%2Fsvg%2Flight.svg"
        />
      </div>
      <!--头像和搜索框-->
      <div class="search-avatar-box">
        <div class="header-user-avatar">
          <a href="http://liuyuncen.com:1888">
            <i class="fa fa-user-o faa-float animated" aria-hidden="true"></i>
          </a>
          <div class="header-user-menu">
            <div class="herder-user-name no-logged"
              >Whether to
              <a
                href="http://liuyuncen.com:1888"
                target="_blank"
                style="color: #333; font-weight: bold; text-decoration: none"
                >log in</a
              >
              now?
            </div>
          </div>
        </div>
        <div class="searchbox" @click="searchHandier(true)">
          <i class="fa fa-search faa-float animated" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </header>
  <!-- 搜索组件-->
  <Search @searchHandier="searchHandier" v-show="isSearchShow"></Search>
  <div style="overflow-x: hidden">
    <div
      @click="MobileNavShowFun"
      :style="
        isMobileNavShow ? mobileStyle.openNavBtn : mobileStyle.closeNavBtn
      "
      :class="isMobileNavShow ? 'open' : ''"
      class="openNav no-select"
    >
      <div class="iconflat no-select">
        <div
          class="icon"
          :style="
            isMobileNavShow ? mobileStyle.openIcon : mobileStyle.closeIcon
          "
        ></div>
      </div>
      <div class="site-branding"
        ><h1 class="site-title"
          ><a id="site-logo" href="https://liuyuncen.com">Xiang</a></h1
        >
      </div>
    </div>
  </div>
  <!--移动端-->
  <div
    v-show="isMobileNavShow"
    id="mo-nav"
    class="open animate__animated animate__bounceInLeft"
  >
    <div class="m-avatar">
      <img src="http://qlogo3.store.qq.com/qzone/1850697175/1850697175/100"
    /></div>
    <p
      style="
        text-align: center;
        color: var(--hr-before-color);
        font-weight: 900;
        font-family: 'Ubuntu', sans-serif;
        letter-spacing: 1.5px;
      "
    >
      Xiang...</p
    >
    <div class="social-icon-box">
      <div v-for="(item, index) in social || []" :key="index">
        <a :href="item.path" target="_blank" :title="item.title">
          <img :src="item.src" />
        </a>
      </div>
    </div>
    <div class="m-search">
      <form class="m-search-form" method="get" action="https://xiaozaiyi.xyz"
        ><input
          class="m-search-input"
          type="search"
          name="s"
          placeholder="搜索..."
          required=""
      /></form>
    </div>
    <ul id="menu-new-1" class="menu">
      <li class="current-menu-ancestor current-menu-parent">
        <router-link :to="{ path: '/' }">
          <span class="faa-parent animated-hover">
            <i class="fa fa-home faa-shake" aria-hidden="true"> </i>
            首页
          </span>
        </router-link>
      </li>
      <Menu :navList="store.state.navList"></Menu>
    </ul>
  </div>
  <!--  <MainVideo/>-->
</template>

<script setup>
  import { onUnmounted, onMounted, reactive, ref, watch, nextTick } from 'vue'
  import Search from '@/components/Search'
  import { useStore } from 'vuex'
  import * as types from '@/store/mutation-types'
  import { debounce, throttle } from '@/utils/webutils'
  import Menu from '@/components/meum/Menu'

  import { social, user } from '@/settings'
  // bar样式
  const barStyle = reactive({
    width: '0%',
    height: '0.2rem',
    backgroundScolor: '#83e7ef',
    backgroundImage: 'linear-gradient(90deg, #83e7ef 0%, #fe40ff 100%)'
  })
  //手机样式
  const mobileStyle = reactive({
    openNavBtn: {
      height: '100%'
    },
    closeNavBtn: {},
    openIcon: {
      margin: '0 0 0 250px'
    },
    closeIcon: {
      margin: '0'
    }
  })

  // 默认显示白天模式
  const isShowLightAndDarkIcon = ref(
    JSON.parse(window.localStorage.getItem('theme')) || false
  )

  //导航菜单节点
  const headerRef = ref('')

  //导航显示样式
  // const isHeaderShow = ref(false)

  //搜索页面显示
  const isSearchShow = ref(false)

  //移动端导航显示
  const isMobileNavShow = ref(false)

  const store = new useStore()

  //搜索页面展示
  const searchHandier = (isShow) => {
    isSearchShow.value = isShow
  }

  //移动端菜单显示
  const MobileNavShowFun = () => {
    isMobileNavShow.value = !isMobileNavShow.value
    if (isMobileNavShow.value) {
      $('#all-box').addClass('open')
      $('#site-logo').hide()
    } else {
      $('#all-box').removeClass('open')
      $('#site-logo').show()
    }
  }

  watch(barStyle, (newValue) => {
    //滚动触发,取消显示主题菜单
    $('.skin-menu').removeClass('show')
    if (parseInt(newValue.width) > 90) {
      store.commit(types.CHANGED_INFINITE_SCROLL_DISTANCE, {
        infiniteScrollDistance: 0,
        isLoad: true
      })
    }
  })
  /**
   * 鼠标划入监听
   */
  const headerHandier = () => {
    if (!_.isEmpty(headerRef.value)) {
      headerRef.value.style.background = 'var(--global-bg);'
    }
  }

  // 滚动触发回调-->bar样式百分比控制
  const handleScroll = () => {
    let scrollTop = Math.max(
      document.body.scrollTop || document.documentElement.scrollTop
    )
    let clientHeight = document.documentElement.clientHeight
    let scrollHeight = Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight
    )
    let position = (scrollTop / (scrollHeight - clientHeight)) * 100
    //记录位置
    store.commit('RECORD_SCROLL_POSITION', Math.round(position))
    barStyle.width = position + '%'
    //菜单控制显示
    if (scrollTop <= 0 && !_.isEmpty(headerRef.value)) {
      headerRef.value.style.display = 'none'
    }
  }

  /**
   * 获取鼠标当前位置
   * @param e
   */
  const updateMove = (e) => {
    let y = e.y
    if (y <= 75) {
      if (!_.isEmpty(headerRef.value)) {
        headerRef.value.style.display = ''
      }
    }
  }

  /**
   * 复制提示
   */
  const addCopyright = (e) => {
    if (window.getSelection().toString().length > 10) {
      e.preventDefault()
      let htmlData =
        '# 商业转载请联系作者获得授权，非商业转载请注明出处。<br>' +
        '# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.<br>' +
        '# 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)<br>' +
        '# 作者(Author)：Xiang' +
        '' +
        '<br>' +
        '# 链接(URL)：' +
        window.location.href +
        '<br>' +
        '# 来源(Source)：' +
        'mashiro_option.site_name' +
        '<br><br>' +
        window.getSelection().toString().replace(/\r\n/g, '<br>')
      let textData =
        '# 商业转载请联系作者获得授权，非商业转载请注明出处。\n' +
        '# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.\n' +
        '# 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)\n' +
        '# 作者(Author)：' +
        'Xiang' +
        '\n' +
        '# 链接(URL)：' +
        window.location.href +
        '\n' +
        '# 来源(Source)：' +
        'mashiro_option.site_name' +
        '\n\n' +
        window.getSelection().toString().replace(/\r\n/g, '\n')
      if (e.clipboardData) {
        e.clipboardData.setData('text/html', htmlData)
        e.clipboardData.setData('text/plain', textData)
      } else if (window.clipboardData) {
        return window.clipboardData.setData('text', textData)
      }
    }
    ElMessage({
      dangerouslyUseHTMLString: true,
      center: true,
      type: 'success',
      offset: 80,
      message:
        '<strong>复制成功<i class="fa fa-copy" aria-hidden="true"></i></strong>'
    })
  }

  /**
   * 回到顶部
   * @param even
   * @constructor
   */
  const BackTo = (even) => {
    even.target.classList.remove('cd-is-visible')
  }

  const isShowLightAndDarkIconFun = () => {
    if (!isShowLightAndDarkIcon.value) {
      $('html').attr('data-theme', 'dark')
    } else {
      $('html').attr('data-theme', 'light')
    }
    window.localStorage.setItem(
      'theme',
      isShowLightAndDarkIcon.value.toString()
    )
    store.commit('RECORD_SET_THEME', isShowLightAndDarkIcon.value)
    isShowLightAndDarkIcon.value = !isShowLightAndDarkIcon.value
  }

  nextTick(() => {
    isShowLightAndDarkIconFun()
  })

  onMounted(() => {
    // 挂载滚动条监听
    window.addEventListener('scroll', debounce(handleScroll, 100), {
      passive: true
    })
    window.addEventListener('mousemove', debounce(updateMove, 100), {
      passive: true
    })
    document.body.addEventListener('copy', throttle(addCopyright, 200), {
      passive: true
    })
  })
  onUnmounted(() => {
    // 卸载监听,防止报错
    window.removeEventListener('scroll', handleScroll)
    window.removeEventListener('mousemove', updateMove)
    window.removeEventListener('copy', addCopyright)
  })
</script>

<style lang="scss" scoped>
  .site-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
  }

  .site-top .lower nav {
    display: block;
  }

  .logolink.moe-mashiro a {
    line-height: 60px;
    padding-top: 0px;
  }

  .searchbox {
    font-size: 24px;
    color: var(--font-color);
  }

  .searchbox:hover {
    font-size: 30px;
    color: orange;
    cursor: pointer;
  }

  .header-user-avatar {
    font-size: 24px;
    color: var(--font-color);
    a {
      color: var(--text-accent);
    }
  }

  .header-user-avatar:hover {
    color: orange;
    cursor: pointer;
  }

  .site-top .lower {
    margin: 15px auto;
  }

  #menu-new {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* This only changes this particular animation duration */
  .animate__animated.animate__fadeInUp {
    --animate-duration: 0.5s;
  }

  .el-backtop {
    right: -999px !important;
    z-index: 99;
  }

  .social-icon-box {
    display: flex;
    justify-items: center;
    justify-content: center;

    div {
      padding: 5px 4px;
      text-align: center;
    }

    img {
      width: 20px;
    }
  }

  .menu-new-1 {
    color: var(--font-color);

    li {
      a {
        color: var(--font-color);

        span {
          color: var(--font-color);
        }
      }
    }
  }

  .light-dark {
    position: absolute;
    right: 150px;
    cursor: pointer;

    img {
      height: 30px;
    }
  }

  .site-branding {
    a {
      span {
        color: var(--font-color);
      }
    }
  }
</style>
